<template>
	<view class="content">
		<view class="detailsCss" v-if="state?.clothingDetailData?.status == 1">
			<uni-forms ref="editForm" :modelValue="state.clothingDetailData">

				<uni-forms-item label="学生姓名" name="studentName" label-width='90px'>
					<uni-easyinput type="text" v-model="state.clothingDetailData.studentName" disabled />
				</uni-forms-item>	
				<uni-forms-item label="所属学年" name="studentName" label-width='90px'>
					<uni-easyinput type="text" v-model="state.clothingDetailData.grade" disabled />
				</uni-forms-item>
				<uni-forms-item label="所在班级" name="classes" label-width='90px'>
					<uni-easyinput type="text" v-model="state.clothingDetailData.classes" disabled />
				</uni-forms-item>
				<uni-forms-item label="学生联系方式" name="studentPhone" label-width='90px'>
					<uni-easyinput type="text" v-model.number="state.clothingDetailData.studentPhone" disabled />
				</uni-forms-item>
				<uni-forms-item label="老师姓名" name="teacherName" label-width='90px'>
					<uni-easyinput type="text" v-model="state.clothingDetailData.teacherName" disabled />
				</uni-forms-item>
				<uni-forms-item label="老师联系方式" name="teacherPhone" label-width='90px'>
					<uni-easyinput type="text" v-model.number="state.clothingDetailData.teacherPhone" disabled />
				</uni-forms-item>
			</uni-forms>
			<view class="callrow">
				<button type="primary" :disabled="!state?.clothingDetailData?.studentPhone" class="sysbut1"
					@click="eventFun('callStudentPhone')">拨打学生手机号</button>
				<button type="primary" :disabled="!state.clothingDetailData?.teacherPhone"
					@click="eventFun('callTeacherPhone')">拨打教师手机号</button>
			</view>
		</view>
		<view class="editCss" v-else-if="state?.clothingDetailData?.status == 0">
			<uni-forms ref="editForm" :modelValue="state.clothingDetailData" :rules="rules">

				<uni-forms-item label="学生姓名" name="studentName" label-width='90px'>
					<uni-easyinput type="text" v-model="state.clothingDetailData.studentName" placeholder="请输入学生姓名" />
				</uni-forms-item>	
				<uni-forms-item label="所属学年" name="studentName" label-width='90px'>
					 <uni-data-select v-model="state.clothingDetailData.grade" :localdata="schooYearMenu"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="所在班级" name="classes" label-width='90px'>
					<uni-easyinput type="text" v-model="state.clothingDetailData.classes" placeholder="请输入所在班级几年级几班" />
				</uni-forms-item>
				<uni-forms-item label="学生联系方式" name="studentPhone" label-width='90px'>
					<uni-easyinput type="text" v-model="state.clothingDetailData.studentPhone" placeholder="请输入学生联系方式" />
				</uni-forms-item>
				<uni-forms-item label="老师姓名" name="teacherName" label-width='90px'>
					<uni-easyinput type="text" v-model="state.clothingDetailData.teacherName" placeholder="请输入老师姓名" />
				</uni-forms-item>
				<uni-forms-item label="老师联系方式" name="teacherPhone" label-width='90px'>
					<uni-easyinput type="text" v-model="state.clothingDetailData.teacherPhone" placeholder="请输入老师联系方式" />
				</uni-forms-item>
			</uni-forms>
			<button class="button" @click="eventFun('sub')">提交信息</button>

		</view>
		<view class="editCss" v-else>
			<image class="logo" src="/static/zanwu.png"></image>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="确认填写的信息" content="准确填写内容信息"
				@confirm="eventFun('dialogConfirm')" @close="eventFun('dialogClose')"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
import {
	reactive,
	ref
} from "vue";
import {
	getClothingDetailApi,
	getStudentInfoApi
} from '@/config/APIS.js'
import {
	onLoad
} from "@dcloudio/uni-app";
import {
	schooYearMenu
} from "../index/json.js";



let state = reactive({
	clothingDetailData: {}
})

const alertDialog = ref()
const editForm = ref()
let rules = reactive({
	// 对name字段进行必填验证
	classes: {
		rules: [{
			required: true,
			errorMessage: '请输入班级名称',
		}]
	},
	grade: {
		rules: [{
			required: true,
			errorMessage: '请输入所属学年',
		}]
	},
	studentName: {
		rules: [{
			required: true,
			errorMessage: '请输入学生姓名',
		}]
	},
	teacherName: {
		rules: [{
			required: true,
			errorMessage: '请输入教师姓名',
		}]
	},
	studentPhone: {
		rules: [{
			minLength: 11,
			maxLength: 11,
			errorMessage: '手机号长度在 {minLength}个数字',
		},
		{
			validateFunction: function (rule, value, data, callback) {
				if (value) {
					var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
					if (!reg.test(value)) {
						return callback('请请正确输入学生手机号');
					} else {
						return true;
					}
				} else {
					return true;
				}

			}
		}
		]
	},
	teacherPhone: {
		rules: [{
			minLength: 11,
			maxLength: 11,
			errorMessage: '手机号长度在 {minLength}个数字',
		},
		{
			validateFunction: function (rule, value, data, callback) {
				if (value) {
					var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
					if (!reg.test(value)) {
						return callback('请请正确输入教师手机号');
					} else {
						return true;
					}
				} else {
					return true;
				}

			}
		}
		]
	},

})
onLoad((option) => {
	//option为object类型，会序列化上个页面传递的参数
	let clothingId = JSON.parse(decodeURIComponent(option.clothingId))
	getClothingDetailFun(clothingId)
})
const eventFun = async (type) => {
	switch (type) {
		case 'sub': //提交
			editForm.value.validate().then(res => {
				console.log('表单数据信息：', res);
				alertDialog.value.open()
			}).catch(err => {
				console.log('表单错误信息：', err);
			})

			// .close()
			break;
		case 'dialogConfirm': //确认提交
			uni.showLoading({
				title: '保存中'
			});
			await getStudentInfoApi({
				...state.clothingDetailData,
				status: 1
			})

			await getClothingDetailFun(state.clothingDetailData.clothingId)
			uni.hideLoading();
			break;
		case 'dialogClose':
			alertDialog.value.close()
			break;
		case 'callStudentPhone':

			uni.makePhoneCall({
				phoneNumber: state.clothingDetailData?.studentPhone
			});
			break;
		case 'callTeacherPhone':

			uni.makePhoneCall({
				phoneNumber: state.clothingDetailData?.teacherPhone
			});
			break;
		default:
			break;
	}
}
const getClothingDetailFun = async (clothingId) => {
	uni.showLoading({
		title: '加载中'
	});
	let resData = await getClothingDetailApi({
		clothingId
	})
	if (resData.success) {
		state.clothingDetailData = resData.data
	} else {

	}
	uni.hideLoading();
}
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}

.callrow {
	display: flex;
}

.sysbut1 {
	margin-right: 10px;
}
</style>